<template>
	<view class="box">
		<view class="biaoqian">
			<u-tabs :list="list2" lineWidth="20" lineHeight="10" @click="handleTabClick"></u-tabs>
		</view>
		<!-- 1 -->
	<view v-if="isFirstVisible">
		<view class="body">
			<!-- 活动列表部分 -->
			<view class="body1">
				<view style="width: 40px; height: 40px;"><u-avatar :src="src" size="40px"></u-avatar></view>
				
				<view class="item">
					<view style="width: 200px; height: 20px; display: flex;">
						<text style="font-weight: bold; font-size: 15px;">李然Max</text>
						<view class="a1" style="margin-left: 10px;">
							<text style="color: goldenrod; font-size: 10px; display: flex; align-items: center; justify-content: center;">孤独的行者</text>
						</view>
					</view>
					
					<view style="width: 150px; height: 20px;">
						<text style="font-weight: bold; font-size: 10px;">发布时间：  2024-09-01  11:00</text>
					</view>
					
				</view>
				<view class="d1">
					<image src="../../../static/weizhi1.png" style="width: 20px; height: 20px;"></image>
					北京昌平-Boskey House(北京工体店)
				</view>
			</view>
			<view class="body4" style="margin-left: 15px;margin-top: 15px;">
				<view style="margin-bottom: 20px;">
					<text>用烟火气下酒:</text>
				</view>
				<view>
					<text style="color: #696969;">周末约个快乐的骑行吧!  雁栖湖环岛骑行快乐无边，虽然最后下起暴雨还养活路边蚊子，但无法磨灭骑行的快乐。</text>
				</view>
			</view>
			<view class="body2">
				<uni-row>
					<uni-col :span="8">
						<view  class="grid-item-box">
						<image style="width: 100%; height: 140px;" src="../../../static/huodong1.jpg"></image>
						</view>
					</uni-col>
					<uni-col :span="8">
						<view  class="grid-item-box">
						<image style="width: 100%; height: 140px;" src="../../../static/huodong2.png"></image>
						
						</view>
					</uni-col>
					<uni-col :span="8">
						<view  class="grid-item-box">
						<image style="width: 100%; height: 140px;" src="../../../static/huodong3.jpg"></image>
						
						</view>
					</uni-col>
				</uni-row>
				<!-- <view class="body3">
					<view class="a2" style="margin-left: 10px;">
						<text style=" font-size: 10px; display: flex; align-items: center; justify-content: center;">#周末去哪儿#</text>
					</view>
				
					<view class="a2" style="margin-left: 10px;">
						<text style=" font-size: 10px; display: flex; align-items: center; justify-content: center;">#誰说妹子不骑车#</text>
					</view>
				
					<view class="a2">
						<text style=" font-size: 10px; display: flex; align-items: center; justify-content: center;">#北京周边游#</text>
					</view>
					
				</view>
				 -->
			</view>
		</view>
		<!-- 2 -->
		<view class="body">
			<!-- 活动列表部分 -->
			<view class="body1">
				<view style="width: 40px; height: 40px;"><u-avatar :src="src" size="40px"></u-avatar></view>
				
				<view class="item">
					<view style="width: 200px; height: 20px; display: flex;">
						<text style="font-weight: bold; font-size: 15px;">李然Max</text>
						<view class="a1" style="margin-left: 10px;">
							<text style="color: goldenrod; font-size: 10px; display: flex; align-items: center; justify-content: center;">孤独的行者</text>
						</view>
					</view>
					
					<view style="width: 150px; height: 20px;">
						<text style="font-weight: bold; font-size: 10px;">发布时间：  2024-07-12  13:00</text>
					</view>
					
				</view>
				<view class="d1">
					<image src="../../../static/weizhi1.png" style="width: 20px; height: 20px;"></image>
					昌平东关（地铁站）—居庸关长城
				</view>
			</view>
			<view class="body4" style="margin-left: 15px;margin-top: 15px;">
				<view style="margin-bottom: 20px;">
					<text>用烟火气下酒:</text>
				</view>
				<text style="color: coral;""> # 夜骑</text>
				<view>
					<text style="color: #696969;">快乐暑假，快乐骑行🚴🏻‍♂️🚴🏻‍♀️🚴🏼</text>
				</view>
			</view>
			<view class="body2">
				<uni-row>
					<uni-col :span="8">
						<view  class="grid-item-box">
						<image style="width: 100%; height: 140px;" src='../../../static/touxiang.jpg'></image>
						</view>
					</uni-col>
					<uni-col :span="8">
						<view  class="grid-item-box">
						<image style="width: 100%; height: 140px;" src="../../../static/ride11.png"></image>
						
						</view>
					</uni-col>
					<uni-col :span="8">
						<view  class="grid-item-box">
						<image style="width: 100%; height: 140px;" src="../../../static/ride10.png"></image>
						
						</view>
					</uni-col>
				</uni-row>
				<!-- <view class="body3">
					<view class="a2" style="margin-left: 10px;">
						<text style=" font-size: 10px; display: flex; align-items: center; justify-content: center;">#周末去哪儿#</text>
					</view>
				
					<view class="a2" style="margin-left: 10px;">
						<text style=" font-size: 10px; display: flex; align-items: center; justify-content: center;">#誰说妹子不骑车#</text>
					</view>
				
					<view class="a2">
						<text style=" font-size: 10px; display: flex; align-items: center; justify-content: center;">#北京周边游#</text>
					</view>
					
				</view> -->
				
			</view>
		</view>
		<!-- 3 -->
		<view class="body">
			<!-- 活动列表部分 -->
			<view class="body1">
				<view style="width: 40px; height: 40px;"><u-avatar :src="src" size="40px"></u-avatar></view>
				
				<view class="item">
					<view style="width: 200px; height: 20px; display: flex;">
						<text style="font-weight: bold; font-size: 15px;">李然Max</text>
						<view class="a1" style="margin-left: 10px;">
							<text style="color: goldenrod; font-size: 10px; display: flex; align-items: center; justify-content: center;">孤独的行者</text>
						</view>
					</view>
					
					<view style="width: 160px; height: 20px;">
						<text style="font-weight: bold; font-size: 10px;">发布时间：  2024-08-23  15:00</text>
					</view>
					
				</view>
				<view class="d1">
					<image src="../../../static/weizhi1.png" style="width: 20px; height: 20px;"></image>
					北京怀柔/密云
				</view>
			</view>
			<view class="body4" style="margin-left: 15px;margin-top: 15px;">
				<view style="margin-bottom: 20px;">
					<text>用烟火气下酒:</text>
				</view>
				<text style="color: coral;""> # 女骑</text>
				<view>
					<text style="color: #696969;">沿途风景🚴🏻‍♂️🚴🏻‍</text>
				</view>
			</view>
			<view class="body2">
				<uni-row>
					<uni-col :span="8">
						<view  class="grid-item-box">
						<image style="width: 100%; height: 140px;" src="../../../static/zp1.jpg"></image>
						</view>
					</uni-col>
					<uni-col :span="8">
						<view  class="grid-item-box">
						<image style="width: 100%; height: 140px;" src="../../../static/ride13.png"></image>
						
						</view>
					</uni-col>
					<uni-col :span="8">
						<view  class="grid-item-box">
						<image style="width: 100%; height: 140px;" src="../../../static/fengjing1.jpg"></image>
						
						</view>
					</uni-col>
				</uni-row>
				<!-- <view class="body3">
					<view class="a2" style="margin-left: 10px;">
						<text style=" font-size: 10px; display: flex; align-items: center; justify-content: center;">#周末去哪儿#</text>
					</view>
				
					<view class="a2" style="margin-left: 10px;">
						<text style=" font-size: 10px; display: flex; align-items: center; justify-content: center;">#誰说妹子不骑车#</text>
					</view>
				
					<view class="a2">
						<text style=" font-size: 10px; display: flex; align-items: center; justify-content: center;">#北京周边游#</text>
					</view>
					
				</view>
				 -->
			</view>
		</view>
	</view>
	
	<!-- 第二个页面里的东西 -->
	<view v-else>
		<!-- 1 -->
		<view class="body">
			<!-- 活动列表部分 -->
			<view class="body1">
				<view style="width: 40px; height: 40px;"><u-avatar :src="src2" size="40px"></u-avatar></view>
				
				<view class="item">
					<view style="width: 200px; height: 20px; display: flex;">
						<text style="font-weight: bold; font-size: 15px;">李宁Max</text>
						<view class="a1" style="margin-left: 10px;">
							<text style="color: goldenrod; font-size: 10px; display: flex; align-items: center; justify-content: center;">孤独的行者</text>
						</view>
					</view>
					
					<view style="width: 150px; height: 20px;">
						<text style="font-weight: bold; font-size: 10px;">发布时间：  2024-02-01  15:00</text>
					</view>
					
				</view>
				<view class="d1">
					<image src="../../../static/weizhi1.png" style="width: 20px; height: 20px;"></image>
					北京朝阳工体Liv酒吧
				</view>
			</view>
			<view class="body4" style="margin-left: 15px;margin-top: 15px;">
				<view style="margin-bottom: 20px;">
					<text>用烟火气下酒:</text>
				</view>
				<view>
					<text style="color: #696969;">周末约个快乐的骑行吧!  雁栖湖环岛骑行快乐无边，虽然最后下起暴雨还养活路边蚊子，但无法磨灭骑行的快乐。</text>
				</view>
			</view>
			<view class="body2">
				<uni-row>
					<uni-col :span="8">
						<view  class="grid-item-box">
						<image style="width: 100%; height: 140px;" src="../../../static/huodong1.jpg"></image>
						</view>
					</uni-col>
					<uni-col :span="8">
						<view  class="grid-item-box">
						<image style="width: 100%; height: 140px;" src="../../../static/huodong2.png"></image>
						
						</view>
					</uni-col>
					<uni-col :span="8">
						<view  class="grid-item-box">
						<image style="width: 100%; height: 140px;" src="../../../static/huodong3.jpg"></image>
						
						</view>
					</uni-col>
				</uni-row>
				<!-- <view class="body3">
					<view class="a2" style="margin-left: 10px;">
						<text style=" font-size: 10px; display: flex; align-items: center; justify-content: center;">#周末去哪儿#</text>
					</view>
				
					<view class="a2" style="margin-left: 10px;">
						<text style=" font-size: 10px; display: flex; align-items: center; justify-content: center;">#誰说妹子不骑车#</text>
					</view>
				
					<view class="a2">
						<text style=" font-size: 10px; display: flex; align-items: center; justify-content: center;">#北京周边游#</text>
					</view>
					
				</view>
				 -->
			</view>
		</view>
		<!-- 2 -->
		<view class="body">
			<!-- 活动列表部分 -->
			<view class="body1">
				<view style="width: 40px; height: 40px;"><u-avatar :src="src2" size="40px"></u-avatar></view>
				
				<view class="item">
					<view style="width: 200px; height: 20px; display: flex;">
						<text style="font-weight: bold; font-size: 15px;">李宁Max</text>
						<view class="a1" style="margin-left: 10px;">
							<text style="color: goldenrod; font-size: 10px; display: flex; align-items: center; justify-content: center;">孤独的行者</text>
						</view>
					</view>
					
					<view style="width: 150px; height: 20px;">
						<text style="font-weight: bold; font-size: 10px;">发布时间：  2024-04-28  8:00</text>
					</view>
					
				</view>
				<view class="d1">
					<image src="../../../static/weizhi1.png" style="width: 20px; height: 20px;"></image>
					北京朝阳PH酒吧
				</view>
			</view>
			<view class="body4" style="margin-left: 15px;margin-top: 15px;">
				<view style="margin-bottom: 20px;">
					<text>用烟火气下酒:</text>
				</view>
				<text style="color: coral;""> # 夜骑</text>
				<view>
					<text style="color: #696969;">快乐暑假，快乐骑行🚴🏻‍♂️🚴🏻‍♀️🚴🏼</text>
				</view>
			</view>
			<view class="body2">
				<uni-row>
					<uni-col :span="8">
						<view  class="grid-item-box">
						<image style="width: 100%; height: 140px;" src='../../../static/touxiang.jpg'></image>
						</view>
					</uni-col>
					<uni-col :span="8">
						<view  class="grid-item-box">
						<image style="width: 100%; height: 140px;" src="../../../static/ride11.png"></image>
						
						</view>
					</uni-col>
					<uni-col :span="8">
						<view  class="grid-item-box">
						<image style="width: 100%; height: 140px;" src="../../../static/ride10.png"></image>
						
						</view>
					</uni-col>
				</uni-row>
				<!-- <view class="body3">
					<view class="a2" style="margin-left: 10px;">
						<text style=" font-size: 10px; display: flex; align-items: center; justify-content: center;">#周末去哪儿#</text>
					</view>
				
					<view class="a2" style="margin-left: 10px;">
						<text style=" font-size: 10px; display: flex; align-items: center; justify-content: center;">#誰说妹子不骑车#</text>
					</view>
				
					<view class="a2">
						<text style=" font-size: 10px; display: flex; align-items: center; justify-content: center;">#北京周边游#</text>
					</view>
					
				</view> -->
				
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: '../../../static/touxiang.jpg',
				src2: '../../../static/zp1.jpg',
				
				isFirstVisible: true, // 控制第一个 <view> 的可见性
				
				list2: [{
                    name: '我发布的活动',
                    
					path: '/pages/mine/My_ctivities/My_ctivities'
                }, {
                    name: '我参加的活动',
                    
					path: '/pages/mine/My_ctivities2/My_ctivities2'
                }],

			}
		},
		methods: {
			handleTabClick(item) {  
			      // 切换可见的 <view>  
			      if (item.name === '我参加的活动') {  
			        this.isFirstVisible = false; // 点击“关注”时切换到第二个视图  
			      } else if (item.name === '我发布的活动') {  
			        this.isFirstVisible = true; // 点击“推荐”时切换到第一个视图  
			      }  
			}  
		}
	}
</script>

<style>
	.box{
		height: 100vh;
	}
	.biaoqian{
		width: 100%; /* 设置宽度 */  
		height: 50px; /* 设置高度 */ 
	}
	.body1{
		width: 100%;
		height: 50px;
		display: flex;
	}
	.body {
	width: 100%;
	height: 380px;
	
	  gap: 20rpx; /* 添加间距 */  
	  background-color: #fff;  
	  padding: 20rpx;  
	  border-radius: 35rpx;  
	  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */  
	  margin-top: 20px;
	}
	.a1{
		width: 80px; height: 18px; background-color: black;border-radius: 10rpx;  
	}
	.item{
		width: 100%;
		height: 50px;
	}
	.d1{
		margin-right: 10px;
		font-weight: bold;
		width: 200px; height: 50px;
		font-size: 13px;
	}
	.body2{
		width: 100%;
		height: 230px;
		margin-top: 30px;
	}
	.grid-item-box{
		display: flex;
		flex-direction: column;/* 纵向布局 */
		align-items: center;/* 纵向居中 */
		justify-content: center;/* 水平居中 */
		margin-left: 15rpx;
	}
	.body3{
		width: 100%;
		height: 30px;
		display: flex;
		margin-top: 20px;
	}
	.a2{
		width: 90px;
		height: 20px;
		border-radius: 15rpx; 
		background-color: aliceblue;
		flex: 1;
		margin: 5px;
	}
	.body4{
		width: 410px;
		height: 100px;
	}
</style>
